<template>
  <div class="Table  height100">
    <div class="table-search" v-show="searchShow">
      <el-form :inline="true" >
        <el-form-item v-for="item in newSearch" :key="item.label" :label="item.label" >
          <el-input v-if="item.type == 'text'" v-model="item.value" :placeholder="'请输入'+item.label"   size="large" />
          <el-select  v-if="item.type == 'select'" v-model="item.value" :placeholder="'请选择'+item.label"  size="large">
            <el-option
              v-for="opt in item.list"
              :key="opt.label"
              :label="opt.label"
              :value="opt.label"
            />
          </el-select>
          <el-date-picker
            v-if="item.type == 'date'"
            v-model="item.value"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="large"
          />
          <el-tree-select
            v-if="item.type == 'treeSelect'"
            v-model="item.value"
            :data="item.list"
            :placeholder="'请选择' + item.label"
            size="large"
            check-strictly
            style="width: 100%;"
            :props="{value:'label', label:'label', children:'children'}"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
          <el-button  :icon="Delete" @click="clearSearchForm">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <slot name="pageHeader"></slot>
    <div class="teble-header">
      <div class="table-btn">
        <el-button v-if="addShow"  type="primary" :icon="Plus" @click="add('新增')">新增</el-button>
        <el-button v-if="delShow"  type="danger" plain :icon="Delete" @click="deleteItem">删除</el-button>
        <el-button v-if="expShow" type="primary" plain :icon="Download" @click="exportFile">导出</el-button>
        <el-button v-if="impShow"  plain :icon="Upload" @click="inportFile">导入</el-button>
        <slot name="tableHeader"></slot>
      </div>
      <right-toolbar v-if="settingShow"></right-toolbar>
      <!-- <div class="table-setting" v-if="settingShow">
        <el-button :icon="Refresh" circle />
        <el-button :icon="Operation" circle />
        <el-button :icon="Search" circle  @click="searchShow = !searchShow"/>
      </div> -->
    </div>
    <el-table
      ref="TableRef"
      v-loading="tableLoading"
      element-loading-text="拼命加载中..."
      :data="tableListData"
      style="width: 100%"
      border
      :row-key="rowId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="55" align="center" v-if="selectionShow"/>
      <el-table-column type="index" label="序号" align="center" :index="table_index" width="60" v-if="indexShow">
      </el-table-column>
      <el-table-column type="expand" v-if="isShowExpand">
        <template #default="scope">
          <slot name="expand" :rowData="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(coloum, index) in coloumData"
        :key="index"
        :width="coloum.width"
        :label="coloum.label"
        :fixed="coloum.fixed ? coloum.fixed : false"
        :sortable="coloum.showSort"
        :sort-by="coloum.sortName"
        align="center"
      >
        <template #default="scope">
          <div v-if="coloum.slot" class="table-operate">
            <el-button type="primary" text :icon="View" @click="add('查看',scope.row)" v-if="rowViewShow">查看</el-button >
            <el-button type="primary" text :icon="Edit" @click="add('编辑',scope.row)" v-if="rowEditShow">编辑</el-button >
            <el-button type="primary" text :icon="Delete"  @click="deleteItem"  v-if="rowDelShow">删除</el-button >
            <el-button type="primary" text :icon="Close"  @click="stopOrOpen('停用')"  v-if="Information">停用</el-button >
            <el-button type="primary" text :icon="Check"  @click="stopOrOpen('启用')"  v-if="Information">启用</el-button >
            <slot :name="coloum.slot" :rowData="scope"></slot>
          </div>
          <div v-else-if="coloum.otherSlot">
            <slot :name="coloum.otherSlot" :rowData="scope"></slot>
          </div>
          <div v-else>
            {{ scope.row[coloum.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination
        background 
        v-if="isShowPagination"
        :current-page="paginationParam.currentPage"
        :page-size="paginationParam.size"
        :page-sizes="paginationParam.sizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParam.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <Import ref="importFile"></Import>
    <Export ref="exportFileRef" :coloumData="coloumData"></Export>
  </div>
</template>
<script setup>
  import { Plus, Delete, Download, Upload, Search, Operation, Refresh, View, Edit, Avatar, Check, Close } from '@element-plus/icons-vue'
  import { reactive, watchEffect } from 'vue';
  import Import from "./Import.vue";
  import Export from "./Export.vue";
  const props = defineProps({
    tableLoading:{
      type:Boolean,
      default:false
    }
  })
  const { proxy } = getCurrentInstance();
   // 表格列表
  const tableData = inject("tableData", []);
  watchEffect(()=>{
    console.log(tableData);
  })
  // 表格头参数
  const coloumData = inject("tabColumn", []);
  // 开启子集需要的key
  const rowId = inject("rowId", "id");
  // 是否显示分页器
  const isShowPagination = inject("isShowPagination", true);
  // 表格第一项是否展开标签
  const isShowExpand = inject("isShowExpand", false);
  const addShow = inject("addShow", true);
  const delShow = inject("delShow", false);
  const expShow = inject("expShow", false);
  const impShow = inject("impShow", false);
  const rowViewShow = inject("rowViewShow", true);
  const rowDelShow = inject("rowDelShow", true);
  const rowEditShow = inject("rowEditShow", true);
  const selectionShow = inject("selectionShow", false);
  const settingShow = inject("settingShow", true);
  const searchList = inject("searchList1", []);
  const searchShow = inject("searchShow", true); 
  const indexShow = inject("indexShow", true); 
  const Information = inject("Information", false); 
  const expFile = inject("expFile", false); 
  const newSearch = ref(searchList);
  const emits = defineEmits()
  const paginationParam = reactive({
    currentPage: 1,
    size: 10,
    sizes: [10, 20, 50, 100],
    total: tableData.length || 0,
  });
  let tableListData = reactive([]);
  watchEffect(()=>{
    const page = paginationParam.currentPage;
    const limit = paginationParam.size;
    tableListData = tableData.slice( ( page - 1) * limit, page * limit );
  })
  // 修改分页大小
  function handleSizeChange(e) {
    paginationParam.size = e;
  }
  // 修改当前页码
  function handleCurrentChange(e) {
    paginationParam.currentPage = e;
  }
  function clearSearchForm() {
    newSearch.value.map(item=>item.value = "");
  }
  const table_index= (index) => {
    return (paginationParam.currentPage-1) * paginationParam.size + index + 1
  }
  function add(title,row){
    emits("add", {title, row})
  }
  const importFile = ref();
  function inportFile(){
    importFile.value.init();
  }
  const exportFileRef = ref();
  const exportFile = () => {
    expFile ? exportFileRef.value.handleConfirm() :exportFileRef.value.init();
    
  }
  const stopOrOpen = (msg) => {
    proxy.$modal.msgSuccess(msg + "成功");
  }
  const TableRef = ref();
  function deleteItem(){
    proxy.$modal.confirm('是否确认删除数据项？').then(() => {
      proxy.$modal.msgSuccess("删除成功");
      TableRef.value.clearSelection()
    }).catch(() => {});
  }
</script>

<style lang="scss" scoped>
::v-deep .el-table td.el-table__cell div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-pagination{
  display: flex;
  justify-content: flex-end;
  margin-top:20px;
}
.table-search{
  margin-bottom: 25px;
}
.teble-header{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.table-btn{
  display: flex;
  margin-bottom: 15px;
}

</style>
<style lang="scss">
  
</style>